<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe>
            <mt-swipe-item v-for="imgs in swipe" :key="imgs.url"><img :src="imgs.url"></mt-swipe-item>
        </mt-swipe>
        <!-- 六宫格 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/news">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                    <div class="mui-media-body">图片分享</div></a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品购买</div></a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div></a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">视频专区</div></a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div></a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
const path = require('path');
export default {
	data () {
		return {
			swipe: null
		}
	},
	methods: {
		getImgUrl () {
			this.$http.get('/data.json').then(response => {
				this.swipe = response.body.swipe;
			})
		}
	},
	created () {
		this.getImgUrl();
	}
}
</script>
<style scoped>
.mint-swipe {
    height: 200px;
}
.mint-swipe img {
	height: 100%; width: 100%;
}
.mui-grid-view.mui-grid-9 {
	background: #fff !important;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
	border: none;
}
</style>